<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>表单提交数据</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="../css/public.css" media="all">
    
</head>
<body>
<div class="layuimini-container">
    <div class="layuimini-main">

        <fieldset class="table-search-fieldset">
            <legend>搜索信息</legend>
            <div style="margin: 10px 10px 10px 10px">
                <form class="layui-form layui-form-pane" action="">
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">表单名</label>
                            <div class="layui-input-inline">
                                <select id="post_formID" name="formID" lay-filter="selectFormID" lay-verify=""></select> 
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">创建日期</label>
                            <div class="layui-input-inline">
                                <input type="text" id="selectDatetime" name="datetime" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">班级</label>
                            <div class="layui-input-inline">
                                <input type="text"  name="banji" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline" >
                            <button type="submit" id="search" class="layui-btn layui-btn-primary"  lay-submit lay-filter="data-search-btn"><i class="layui-icon"></i> 搜 索</button>
                        </div>
                    </div>
                </form>
            </div>
        </fieldset>

        <script type="text/html" id="formtoolbarDemo">
            <div class="layui-btn-container">
                <button class="layui-btn layui-btn-normal layui-btn-sm data-add-btn" lay-event="add"> 创建表单 </button>
                <button class="layui-btn layui-btn-sm layui-btn-danger data-delete-btn" lay-event="delete"> 删除 </button>
            </div>
        </script>

        <table class="layui-hide" id="formTablePostId" lay-filter="fileTableFilter" ></table>

        <script type="text/html" id="fileTableBar">
            <a class="layui-btn layui-btn-normal layui-btn-xs data-count-edit" lay-event="edit">编辑备注</a>
            <a class="layui-btn layui-btn-normal layui-btn-xs layui-btn-warm " lay-event="show">查看</a>
            <a class="layui-btn layui-btn-xs layui-btn-danger data-count-delete" lay-event="delete">删除</a>
            
        </script>
        
    </div>
</div>
<script src="../lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script src="../js/axios.min.js" charset="utf-8"></script>
<script>
    layui.use(['form', 'table', 'laydate', 'layer'], function () {
        var $ = layui.jquery,
            form = layui.form,
            table = layui.table,
            laydate = layui.laydate,
            layer = layui.layer;

        var formField; // 表单ID 映射表单field
        var curForm;  // 当前选中的表单

        form.on('select(selectFormID)', function(data){
            // layer.msg(data.value);    //得到被选中的值
            // layer.msg(data.elem);     //得到select原始DOM对象
            console.log("select", data);
            curForm = parseInt(data.value);
            table.render({
                elem: '#formTablePostId',
                url: '/formTablePostData',
                toolbar: '#formtoolbarDemo',
                defaultToolbar: ['filter', 'exports', 'print', {
                    title: '提示',
                    layEvent: 'LAYTABLE_TIPS',
                    icon: 'layui-icon-tips'
                }],
                cols: [formField[curForm].fields],
                limits: [10, 15, 20, 25, 50, 100],
                limit: 15,
                page: true,
                skin: 'line'
            });
            $("#search").click();
          })

        laydate.render({
            elem: "#selectDatetime",
            type: "date",
            range: true
        })

        // get formID
        axios.post('/formTablePostData/getFormsInfo').then(function (response) {
            console.log("response", response);
            formField = response.data;
            console.log("formField", formField);
    
            var select_form = $("#post_formID");
            var primary_cols = [
                {type: "checkbox", width: 50},
                {type: "numbers", width: 50},
                {field: 'dataID', width: 120, title: '记录ID', sort: true},
                {field: 'stuID', width: 150, title: '学号', sort: true, templet:'<div><span title="{{d.stuID}}";display:block;>{{d.stuID}}</span></div>'},
                {field: 'stu_name', width: 150, title: '姓名', sort: true},
                {field: 'sex', width: 150, title: '性别', sort: true},
                {field: 'banji', width: 150, title: '班级', sort: true},
                {field: 'datetime', width: 150, title: '日期', sort: true}
            ];
            var tmp_cols;
            var opt_elem;
            for (k in formField){
                opt_elem = document.createElement('option');
                opt_elem.value = k;
                opt_elem.text = formField[k].name;
                select_form.append(opt_elem);

                // field
                tmp_cols = Object.assign([], primary_cols);
                for (var i=0; i<formField[k].fields.length;++i){
                    tmp_cols.push({field: 'field'+i , width: 150, title: formField[k].fields[i], sort: true});
                }
                tmp_cols.push({title: '操作', minWidth: 260, toolbar: '#fileTableBar', align: "center"});
                formField[k].fields = tmp_cols;
            }
            form.render();
            curForm = parseInt($("dd.layui-this").attr('lay-value'))
            console.log("curForm",curForm);
            console.log("formField",formField);
            table.render({
                elem: '#formTablePostId',
                url: '/formTablePostData',
                toolbar: '#formtoolbarDemo',
                defaultToolbar: ['filter', 'exports', 'print', {
                    title: '提示',
                    layEvent: 'LAYTABLE_TIPS',
                    icon: 'layui-icon-tips'
                }],
                cols: [formField[curForm].fields],
                limits: [10, 15, 20, 25, 50, 100],
                limit: 15,
                page: true,
                skin: 'line'
            });
            $("#search").click();
        })
        // .catch(function (error) {
        //     layer.msg("初始化表单失败!\n"+error,{icon:2});
        // });

        // 监听搜索操作
        form.on('submit(data-search-btn)', function (data) {
            var result = JSON.stringify(data.field);
            // layer.alert(result, {
            //     title: '最终的搜索信息'
            // });

            //执行搜索重载
            table.reload('formTablePostId', {
                page: {
                    curr: 1
                }
                , where: {
                    searchParams: result
                }
            }, 'data');

            return false;
        });

        /**
         * toolbar监听事件
         */
        table.on('toolbar(fileTableFilter)', function (obj) {
            if (obj.event === 'add') {  // 监听添加操作
                var index = layer.open({
                    title: '上传文件',
                    type: 2,
                    shade: 0.2,
                    maxmin:true,
                    shadeClose: true,
                    area: ['100%', '100%'],
                    content: '../page/createForm.html',
                });
                $(window).on("resize", function () {
                    layer.full(index);
                });
            } else if (obj.event === 'delete') {  // 监听删除操作
                var checkStatus = table.checkStatus('formTablePostId')
                    , data = checkStatus.data;
                if (data.length==0) {layer.msg("请选中一个元素进行删除");return false;}
                layer.confirm("确定要删除？",function(index){
                    data0 = []
                    for(var i=0; i< data.length; ++i){
                        data0.push(data[i].formID)
                    }
                    
                    var cur =  $(".layui-laypage-skip").find("input").val(); 
                    var limit = $(".layui-laypage-limits").find("option:selected").val();
                    
                    axios.post('/form/delFormsData', data0)
                    .then(function (response) {
                        // console.log(response);
                        layui.table.reload('formTablePostId',{
                            url:"/form/formData",
                            // type:"post",
                            where: {
                                page:cur,
                                limit:limit
                            }
                            ,page: {
                                curr: cur //重新从当前 页开始
                            }
                        });
                        
                        
                        layer.msg("数据删除成功！",{icon:1});
                    }).catch(function (error) {
                        layer.msg("数据删除失败！",{icon:2});
                    }); 	
                    layer.close(index);
                });
            }

            $("#post_formID").on("click", function(){
                console.log("click");

            });
        });
        

        //监听表格复选框选择
        table.on('checkbox(fileTableFilter)', function (obj) {
            console.log(obj)
        });

        table.on('tool(fileTableFilter)', function (obj) {
            var data = obj.data;
            if (obj.event === 'edit') {

                var index = layer.open({
                    title: '编辑表单信息',
                    type: 2,
                    shade: 0.2,
                    maxmin:true,
                    shadeClose: true,
                    area: ['100%', '100%'],
                    content: '../page/table/edit_form.html',
                    success:function (layero, index) {
                    //打开子窗口后通过success赋值,两个变量基本是固定写法
                        var body = layer.getChildFrame('body', index);
                        var iframeWin = window[layero.find('iframe')[0]['name']];

                        console.log(data.content);
                        
                        //给子窗口中的元素赋值
                        body.find('input[name="formID"]').val(data.formID);
                        body.find('input[name="formTitle"]').val(data.formTitle);
                        body.find('textarea[name="beizhu"]').val(data.beizhu);

                    }
                });
                $(window).on("resize", function () {
                    layer.full(index);
                });
                return false;
            } else if (obj.event === 'delete') {
                layer.confirm('是否删除数据', function (index) {
                    // console.log(obj);
                    
                    axios.post('/form/delFormData', obj.data)
                    .then(function (response) {
                        obj.del();
                        layer.msg("数据删除成功！",{icon:1});
                    }).catch(function (error) {
                        layer.msg("数据删除失败！",{icon:2});
                    }); 	
                    layer.close(index);

                });
            } else if (obj.event === "show") {
                console.log("event show",obj)
                var index = layer.open({
                    title: '查看表单',
                    type: 2,
                    shade: 0.2,
                    maxmin:true,
                    shadeClose: true,
                    area: ['100%', '100%'],
                    content: 'getForm?id='+data.formID
                });

            }
        });

    });
</script>

</body>
</html>